<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
                :title = 'totalNum > 0 ? "购物车-" + totalNum : "购物车"'
                left-arrow
                @click-left="$router.back()"
            />
        </header>
        <div class="content">
            <div class="noShop" v-if="empty">
                <van-empty description="购物车空空如也">
                    <van-button @click="$router.push('/home')" round type="danger" class="bottom-button">立即购物</van-button>
                </van-empty>
            </div>


            <div class="hasShop" v-else>
                <van-swipe-cell
                    v-for="item of cartList"
                    :key="item.cartid"
                >
                    <van-row>
                        <van-col span='1.5' >
                            <div class="my-checkbox">
                                <van-checkbox class="checkbox" v-model="item.flag" @change="chooseOne(item.cartid, item.flag)"  ></van-checkbox>
                            </div>
                        </van-col>
                        <van-col span='22'>
                            <van-card
                                :num="item.num"
                                :price="item.originprice"
                                :title="item.proname"
                                :thumb="item.img1"
                            >
                                <template #num>
                                    <van-stepper v-model="item.num" theme="round"  @change="updateNumFn(item.cartid , item.num)"  />
                                </template>
                            </van-card>
                        </van-col>
                    </van-row>
                    <template #right>
                        <van-button square type="danger" text="删除" class="delete-button" @click="detailCart(item.cartid)"  />
                    </template>
                </van-swipe-cell>


                <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
                    <van-checkbox v-model="checked" @click="chooseAll">全选</van-checkbox>
                </van-submit-bar>
            </div>

        <van-divider>猜你喜欢</van-divider>
        <ProList :proList="proList" ></ProList>
                
        </div>

      
    </div>
</template>

<script>


import {getCartList ,   updateNum ,remove , selectOne , selectAll ,getRecommendList} from '../../api/cart'
import { addOrder} from "../../api/order"
import Vue from 'vue'
import  ProList  from "../../components/ProList"
import { NavBar, Empty, Button, Card, Stepper, SubmitBar, Checkbox, SwipeCell, Toast , Col, Row , Divider} from 'vant'
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Empty)
Vue.use(SwipeCell);
Vue.use(Card);
Vue.use( Stepper);
Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(Col)
Vue.use(Row)
Vue.use(Divider)
export default {
    components: {
        ProList
    },
    data() {
        return {
            empty:false,
            cartList:[],
            checked:false,
            proList:[]
        }
    },
    mounted(){
        if(localStorage.getItem('loginState') === "true"){
            this.getCartListFn()
        }else{
            this.$router.push('/login')
        }

        if(this.$route.name === 'cart'){
            this.$store.state.active = 2
            // console.log(this.$store.state.active);
        }
        // console.log(this.cartList.length);

        getRecommendList().then(res => {
        this.proList = res.data.data
        })
    },
    computed:{
    
        totalNum(){
            return this.cartList.reduce((num , item) => {
                return num + item.num
            },0)
        },
        totalPrice () {
            return this.cartList.reduce((sum, item) => {
                return  item.flag ? sum + item.num * item.originprice : sum + 0
            }, 0) * 100
        }
    },
    methods:{
        getCartListFn(){
            getCartList({userid:localStorage.getItem('userid')}).then(res =>{
                this.cartList = res.data.data
                console.log(res);
                 if (res.data.code === '10020') {  //10020就是购物车data数组里是个空数组无数据
                    this.empty = true
                    this.cartList = [] // 临界值变化 - 否则删除完所有的商品，商品总数量有问题
                } else {
                    this.empty = false
                    this.cartList = res.data.data
                    // 判断全选的状态   every方法  判断条件所有都为真 返回 true  有一个假则返回false
                    this.checked = this.cartList.every(item => item.flag)
                }
            })
        },
        updateNumFn(cartid , num){
            console.log(cartid , num);
            updateNum({cartid , num}).then(res => {
                console.log(res);
            })
        },   
        onSubmit(){
            addOrder({
                userid: localStorage.getItem('userid')
            }).then(res => {
                console.log(res.data)
                this.$router.push('/order/' + res.data.time)
            })
        },
        detailCart(cartid){
            console.log(cartid);
            remove({cartid}).then(res => {
                console.log(res);
                this.getCartListFn()
                Toast('删除成功')
            })
        },
        // 购物车全部选中的状态
        chooseAll(){
            //  请求把购物车数组中所有的数据 flag改为 true选中状态
            selectAll({
                userid: localStorage.getItem('userid'),
                type: this.checked // 数据的双向绑定
            }).then(res => {
                // 重新请求购物车数组数据  重新渲染 选中值
                this.getCartListFn()
            })
        },
        // 购物车单条数据选中状态
        chooseOne(cartid , flag){
            selectOne({cartid , flag}).then(res => {
                console.log(res);
                // 重新请求购物车数组数据  重新渲染 选中值
                this.getCartListFn()
            })
        }
    }

}
</script>

<style lang='stylus' scoped>
.delete-button {
  height: 100%;
}
/deep/.van-icon{
    position relative
    z-index: 100
    // background-color: #fff
}    
// }
.my-checkbox
  z-index: 10
  height 1.04rem

  display flex
  justify-content center
  align-items center
.van-row{
    background-color: #fafafa
}
.header{
    background-color: #fffff
}
.van-card__price-currency , .van-card__price-integer
    color: #cc0000
</style>